<template>
    <!-- 涨 -->
    <div class="fall">
        <div class="billboard_header">
            <div class="title">跌幅榜</div>
            <div class="bctype_select">
                <el-select v-model="monitorState.fallBctype" placeholder="平台" style="width: 120px">
                    <el-option v-for="(key, index) in Object.keys(monitorState.bctypesObj)" :key="key"
                        :label="monitorState.bctypesObj[key]" :value="key" />
                </el-select>
            </div>
        </div>
        <div class="billboard_table">
            <el-table :data="tabledata" @row-click="monitorStore.savepicture" height="100%">
                <el-table-column prop="date" label="赛事" width="60">
                    <template #default="scope">
                        <div class="hidden2">{{ scope.row.minfo.league_name }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="主队/客队" show-overflow-tooltip>
                    <template #default="scope">
                        <div class="flex_column">
                            <div class="flex_column" style="font-size: 12px; color: #000">
                                <div class="hidden1" style="height: 16px; line-height: 16px">
                                    {{ scope.row.minfo.home_name }}
                                </div>
                                <div class="hidden1" style="height: 16px; line-height: 16px">
                                    {{ scope.row.minfo.away_name }}
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="盘口" show-overflow-tooltip>
                    <template #default="scope">
                        <div class="font12 bold hidden1">{{ scope.row.pk_odds_key_ch }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="指数" width="35" align="center">
                    <template #default="scope">
                        <div class="bold" style="color: #2cbd84;">{{ scope.row.odd.toFixed(2) }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="24h" width="43" align="center">
                    <template #header="{ column }">
                        <div class="flex">
                            <el-dropdown popper-class="date_popper" @command="monitorStore.handleCommandFall"
                                trigger="click">
                                <div class="font12">{{ monitorState.fallHours }}h</div>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item :command="1">1h</el-dropdown-item>
                                        <el-dropdown-item :command="4">4h</el-dropdown-item>
                                        <el-dropdown-item :command="24">24h</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <img src="@/assets/monitor/down-square.png"
                                style="width: 8px; height: 8px; margin-left: 4px" alt="" />
                        </div>
                    </template>
                    <template #default="scope">
                        <div class="bold" style="color: #2cbd84;">{{ scope.row[`odd_${monitorState.fallHours}`].toFixed(2) }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="涨跌" sortable width="62" align="center">
                    <template #header="{ column }">
                        <div class="flex">
                            <div>涨跌</div>
                            <img src="@/assets/monitor/down-square2.png"
                                style="width: 8px; height: 8px; margin-left: 4px" alt="" />
                        </div>
                    </template>
                    <template #default="scope">
                        <div class="bold" style="color: #2cbd84;">{{ scope.row[`odd_${monitorState.fallHours}_ratio`].toFixed(2) }}%
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="功能" width="32" align="center">
                    <template #default="scope">
                        <div class="flex">
                            <img v-if="scope.row.collector == 0" src="@/assets/monitor/shoucang.png" alt=""
                                style="width: 16px; height: 16px; cursor: pointer"
                                @click="monitorStore.clickCollect(scope.row)" />
                            <img v-if="scope.row.collector == 1" src="@/assets/monitor/shoucang-active.png" alt=""
                                style="width: 16px; height: 16px; cursor: pointer"
                                @click="monitorStore.clickCancelcollect(scope.row)" />
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
const { monitorStore, monitorState } = inject('MonitorStore')

const tabledata = computed(() => {
    let a = []
    if (monitorState.editionData[`${monitorState.fallBctype}_sorted`]) {
        a = monitorState.editionData[`${monitorState.fallBctype}_sorted`][`down_index_objs_sorted${monitorState.fallHours}`]
    }

    return a
})
</script>

<style lang="scss" scoped>
.fall {
    width: calc(50% - 1px);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ebebeb;
}

.billboard_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    background-color: #f8f9fa;
    padding: 0 12px;

    .title {
        font-size: 14px;
        font-weight: 600;
        color: #000;
    }
}

.billboard_table {
    height: calc(100% - 40px);

}
</style>

<style>
.bctype_select .el-select__wrapper {
    border: solid 1px #ebebeb;
    background-color: #fff;
    border-radius: 0;
    height: 24px;
    min-height: 24px;
}

.bctype_select .el-select__selected-item {
    font-size: 12px;
    color: #000;
}

.hidden2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

<style>
.billboard_table .el-table__border-left-patch {
    width: 0;
}

.billboard_table thead tr th {
    background-color: #fff !important;
}

.billboard_table .el-table__body-wrapper {
    background: #fff;
}

.billboard_table thead tr th .cell {
    font-size: 12px;
    font-weight: 600;
    color: #000;
    padding: 0 4px;
}

.billboard_table tbody tr td .cell {
    font-size: 12px;
    color: #000;
    padding: 0 4px;
}

.billboard_table .caret-wrapper {
    display: none;
}
</style>